<template>
    <div class="login-page w-330 mx-auto">
        <h5 class="my-4 text-center">登录到者也</h5>
        <validate-form @form-submit="onFormSubmit">
            <div class="mb-3">
                <label class="form-label">邮箱地址</label>
                <validate-input :rules="emailRules" v-model="emailVal" placeholder="请输入邮箱地址" type="text"
                    ref="inputRef" />
            </div>
            <div class="mb-3">
                <label class="form-label">密码</label>
                <validate-input type="password" placeholder="请输入密码" :rules="passwordRules" v-model="passwordVal" />
            </div>
            <template #submit>
                <button type="submit" class="btn btn-primary btn-block btn-large">登录</button>
            </template>
        </validate-form>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import ValidateInput, { RulesProp } from '../components/ValidateInput.vue'
import ValidateForm from '../components/ValidateForm.vue'
import CreateMessage from '../components/CreateMessage'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { GlobalDataProps } from '../store'

export default defineComponent({
    name: 'Login',
    components: {
        ValidateInput,
        ValidateForm
    },
    setup() {
        const router = useRouter()
        const store = useStore<GlobalDataProps>()
        const emailVal = ref('')
        const emailRules: RulesProp = [
            { type: 'required', message: '电子邮箱地址不能为空' },
            { type: 'email', message: '请输入正确的电子邮箱格式' }
        ]
        const passwordVal = ref('')
        const passwordRules: RulesProp = [
            { type: 'required', message: '密码不能为空' },
            { type: 'range', min: { length: 6, message: '长度不得小于6位' } }
        ]
        const onFormSubmit = (result: boolean) => {
            console.log('result', result)
            if (result) {
                const payload = {
                    email: emailVal.value,
                    password: passwordVal.value
                }
                store.dispatch('loginAndFetch', payload).then(data => {
                    CreateMessage('登陆成功，2秒后跳转首页', 'success')
                    setTimeout(() => {
                        router.push('/')
                    }, 2000)
                }).catch(e => {
                    console.log(e)
                })
            }
        }
        return {
            emailRules,
            emailVal,
            passwordVal,
            passwordRules,
            onFormSubmit
        }
    }
})
</script>
<style>
.w-330 {
    max-width: 330px;
}
</style>
